<!DOCTYPE html>
<html lang="en">
<head>
    <title>fenlei</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width =device-width, initial-scale=1, maximum-scale=1">
    <link href="css/style.css" rel="stylesheet" type="text/css"  media="all" />
    <link rel="stylesheet" >
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/gghc.js"></script>
    <style type="text/css">
        .food{
            width:100%;
            height:900px;
            position: absolute;
            left:150px;
        }

    </style>
</head>
<body>

<!----start-header----->
<div id="app">
<my-header></my-header>
<div  class="food">


       <table border="0" align="center" cellpadding="0" cellspacing="0" class="main">
           <tr>
               <td></td>
           </tr>
           <tr>
               <td><table width="1500" border="0" cellspacing="10" cellpadding="0">
                   <tr>
                       <td v-for="m in menus"><div class="foodkind"><h2>{{m.kname}} 菜谱</h2></div></td>
                   </tr>
                   <tr>
                       <td valign="top">
                           <table width="1100" border="0" cellspacing="0" cellpadding="0" style="font-size: 20px;text-align: center;color: #574d41;font-family: 微软雅黑">
                           <tr v-for="i in 3">
                               <td v-for="j in 3" v-if="((i-1)*3+(j-1))<length">
                                   <a :href="'single.html?id='+foods[(i-1)*3+(j-1)].id">
                                       <img :src="foods[(i-1)*3+(j-1)].image" width="350" height="250" border="10" />
                                   </a>
                                   <br>{{foods[(i-1)*3+(j-1)].name}}
                               </td>

                           </tr>

                           <tr>
                               <td>&nbsp;</td>
                               <td>&nbsp;</td>
                               <td>&nbsp;</td>
                           </tr>
                       </table>
                       </td>
                   </tr>
                   <tr>
                       <td>&nbsp;</td>
                   </tr>
               </table></td>
           </tr>
           <tr>
               <td>&nbsp;</td>
           </tr>
       </table>

   </div>

</div>

    <script>
        var v = new Vue({
            el : "#app",
            data : {
                foods : [],
                length:"",
                menus : [],
                // context:"",
                page : { total:0, data:[]}

            },
            created(){
                var id=location.search.split('=')[1];
                console.log(id);
                axios.get("FenleiFoods.s?id="+id).then(res=>{
                    this.foods = res.data;
                    console.log( this.foods[0]);
                    this.length=this.foods.length;
                });
                axios.get("queryServlet.s?id="+id).then(res=>{
                    this.menus = res.data;
                    console.log( this.menus);
                });
                this.query(1);
            },
            methods:{
                query(page) {
                    let url = "search.s" + location.search + "&page=" + page;
                    axios.get(url).then(res=>{
                        this.page = res.data;
                    })
                }
                // search(){
                //     axios.get("SearchServlet?=context"+this.context).then(res=>{
                //         this.foods = res.data;
                //         console.log( this.foods[0]);
                //         this.length=this.foods.length;
                //     });
                // }
            }
        })
    </script>


</body>
</html>